<template>
  <div class="main">
    <p  class="main_text">分账结算(发票)</p>
    <!-- ############################################## 表单 ############################################## -->
    <div class="cyr-flex">
      <el-tabs v-model="activeName">
        <!-- ********** 溯源件 ********** -->
        <el-tab-pane name="first">
          <template #label>
            <span>商城</span>
          </template>
        </el-tab-pane>
        <!-- ********** 非溯源件 ********** -->
        <el-tab-pane name="second">
          <template #label>
            <span>收车</span>
          </template>
          <!-- ############################################## 查询 ############################################## -->
          <div class="top">
            <el-form :model="collectionFormData" ref="collectionFormRef" inline >
              <el-form-item label="操作时间：" prop="startAt">
                <FormDate v-model:startTime="collectionFormData.startAt"
                          v-model:endTime="collectionFormData.endAt" v-model:radio="collectionRadio">
                  <span style="margin:0 10px">至</span>
                </FormDate>
              </el-form-item>
              <el-form-item label="订单号：" prop="orderSn">
                <el-input v-model="collectionFormData.orderSn"  />
              </el-form-item>
              <el-form-item label="拆解厂：" prop="companyName">
                <el-input v-model="collectionFormData.companyName"  />
              </el-form-item>
              <el-form-item label="发票状态(易宝手续费)：" prop="commissionInvoiceStatus">
                <el-select v-model="collectionFormData.commissionInvoiceStatus" style="width: 200px">
                  <el-option label="未开票" :value="false" />
                  <el-option label="已开票" :value="true" />
                </el-select>
              </el-form-item>
              <el-form-item label="发票状态(平台)：" prop="invoiceStatus">
                <el-select v-model="collectionFormData.invoiceStatus" style="width: 200px">
                  <el-option label="未开票" :value="false" />
                  <el-option label="已开票" :value="true" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearchC">查询</el-button>
                <el-button type="primary" plain @click="handleResetC(collectionFormRef)">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="collectionTableData"
                     :show-overflow-tooltip="true"  border >
            <el-table-column label="编号" type="index" width="80" />
            <el-table-column label="订单号" prop="orderSn" />
            <el-table-column label="拆解厂" prop="companyName" />
            <el-table-column label="总支出" prop="totalFee" />
            <el-table-column label="拖车费用" prop="residualFee" />
            <el-table-column label="服务费" prop="serviceFee" />
            <el-table-column label="手续费" prop="commission" />
            <el-table-column label="创建时间" prop="createdAt" />
            <el-table-column label="更新时间" prop="updatedAt" />
            <el-table-column label="开票状态(易宝手续费)" prop="commissionInvoiceStatus" width="180" >
              <template #default="props">
                {{ props.row.commissionInvoiceStatus == false ? '未开票' : '已开票' }}
              </template>
            </el-table-column>
            <el-table-column label="开票状态(平台)" prop="invoiceStatus" width="150">
              <template #default="props">
                {{ props.row.invoiceStatus == false ? '未开票' : '已开票' }}
              </template>
            </el-table-column>
              <el-table-column label="操作" width="300" fixed="right" :show-overflow-tooltip="false">
                <template #default="props">
                  <el-button size="small" link  @click="handleConfirmPlatform(props.row)" v-if="!props.row.invoiceStatus">确认发票(平台)</el-button>
                  <el-button size="small" link @click="handleConfirmYb(props.row)" v-if="!props.row.commissionInvoiceStatus">确认发票(易宝)</el-button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <smartPager v-model:current-page="collectionCurrentPage" v-model:page-size="collectionPageSize"
                      :total="collectionTableTotal" @change="handleCollectionCurrentChange" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import  {FormInstance,ElMessage} from 'element-plus'
import {
  RequestCompanyRecords,
  RequestConfirmPlatformInvoice,
  RequestConfirmYbInvoice
} from '@/api/path/index.js'
/*****************************收车***************************************/
const activeName = ref<string>('second')
const collectionFormRef=ref()
const collectionRadio = ref<string>()
const collectionCurrentPage=ref()
const collectionPageSize=ref()
const collectionTableData=ref()
const collectionTableTotal=ref()
const collectionFormData=ref({
  startAt:'',
  endAt: '',
  orderSn: '',
  companyName: '',
  commissionInvoiceStatus: '',
  invoiceStatus: '',
  page: 1,
  rows: 10
})
onMounted(()=>{
  initCollectionData(collectionFormData.value)
})
const handleSearchC=()=>{
   initCollectionData(collectionFormData.value)
}
const handleResetC=(formEl: FormInstance | undefined)=>{
  formEl?.resetFields()
  collectionFormData.value.endAt=''
  collectionRadio.value = ''
  initCollectionData(collectionFormData.value)
}
const handleCollectionCurrentChange=(val:number)=>{
  console.log(val)
}
async function  initCollectionData(searchVal:any){
  RequestCompanyRecords(searchVal).then((res:any) => {
    collectionTableData.value=res.resultObj.data
    collectionTableTotal.value=res.resultObj.total
  })
}
//确认发票平台、易宝
const handleConfirmPlatform=(val:any)=>{
   RequestConfirmPlatformInvoice([val.id]).then((res:any)=>{
       if(res.success){
         ElMessage({
           type: 'success',
           message: res.msg,
         })
         initCollectionData(collectionFormData.value)
       }else{
         ElMessage({
           type: 'warning',
           message: res.msg,
         })
       }
   })
}
const handleConfirmYb=(val:any)=>{
   RequestConfirmYbInvoice([val.id]).then((res:any)=>{
     if(res.success){
       ElMessage({
         type: 'success',
         message: res.msg,
       })
       initCollectionData(collectionFormData.value)
     }else{
       ElMessage({
         type: 'warning',
         message: res.msg,
       })
     }
   })
}

</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}


</style>
